<template>
  <div class="orders">
    <div class="title-nav">
      <span>订单列表</span>
    </div>
    <ul class="orderlist" v-if="!isHas">
      <li v-for="(item, index) in list" :key="index">
        <div class="item-img">
          <img
            class="auto-img"
            :src="'//elm.cangdu.org/img/' + item.shopImg"
            alt=""
          />
        </div>
        <div class="item-text">
          <div class="title">
            <div class="title-name">{{ item.shopName }}</div>
            <div>
              <span class="nowtitle" @click="goPage('Detail', item.id)"
                >再来一单</span
              >等待付款
            </div>
          </div>
          <div class="data">
            <div>{{ item.dataTime }}</div>
            <div class="detele" @click="getdetele(index)">删除</div>
          </div>
          <div class="price">
            <div>
              {{ item.shopData[0].name }}等{{ item.shopData.length }}件商品
            </div>
            <div class="paices">
              价格:&yen; <span>{{ item.total }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="list-item-box" v-if="isHas">没有订单! 请下单</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

import { useRouter } from "vue-router";

import axios from "axios";

export default defineComponent({
  name: "Orders",
  setup() {
    // let uesr:number = 76968;
    let uesr: number = 76942;

    let list: any = ref<Array<any>>([]);

    let detele: Array<any> = [];

    let isHas = ref(false);

    let getShopbaglist: () => void = (): void => {
      let shopbaglist: any = localStorage.getItem("shopbaglist");
      if (shopbaglist) {
        shopbaglist = JSON.parse(shopbaglist);
      } else {
        shopbaglist = [];
        isHas.value = true;
      }
      list.value = shopbaglist;
      if (shopbaglist.length == 0) {
        isHas.value = true;
      } else {
        isHas.value = false;
      }
    };

    let router: any = useRouter();
    //跳转新增地址 页面
    let goPage: (name: string, id: any) => void = (
      name: string,
      id: any
    ): void => {
      router.push({
        name,
        query: { id: id },
      });
      // console.log('id==>',id);
    };
    // 删除订单
    let getdetele: (index: number) => void = (index: number): void => {
      let shopbaglist: any = localStorage.getItem("shopbaglist");
      shopbaglist = JSON.parse(shopbaglist);
      detele = shopbaglist.splice(index, 1);
      //   console.log("shopbaglist==>", shopbaglist);
      if (shopbaglist.length == 0) {
        isHas.value = true;
      } else {
        isHas.value = false;
      }
      localStorage.setItem("shopbaglist", JSON.stringify(shopbaglist));
      list.value = shopbaglist;
    };

    onMounted(() => {
      getShopbaglist();
    });

    return {
      list,
      isHas,
      goPage,
      getdetele,
    };
  },
});
</script>

<style lang="scss" scoped>
.detele {
  width: 60px;
  background-color: #f00;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
  border-radius: 5px;
}
.data {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
}
.list-item-box {
  width: 100%;
  height: 667px;
  line-height: 400px;
  text-align: center;
  background-color: #ddd;
  color: #fff;
  font-size: 24px;
}

.nowtitle {
  display: inline-block;
  padding: 3px;
  background-color: #3190e8;
  color: #fff;
  margin-right: 5px;
}
.auto-img {
  width: 100%;
  display: block;
}
.title-nav {
  width: 100%;
  height: 40px;
  position: sticky;
  top: 0;
  left: 0;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 18px;
  background-color: #3190e8;
}
.orderlist {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  // margin-top: 40px;
  margin-bottom: 50px;
  li {
    width: 100%;
    display: flex;
    align-items: center;
    // background-color: rgba(193, 195, 197, 0.2);
    border: 1px solid #ddd;
    box-shadow: 0px 0px 4px 2px #ddd;
    margin-bottom: 10px;
    .item-img {
      width: 50px;
      height: 50px;
      margin: 5px;
      background-color: #fff;
    }
    .item-text {
      width: calc(100% - 60px - 20px);
      padding: 5px 10px;
      .title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        .title-name {
          font-size: 18px;
          color: #1320cf;
        }
      }
      .price {
        display: flex;
        width: 100%;
        margin: 10px 0;
        justify-content: space-between;
        .paices {
          color: #f00;
        }
      }
      .payment {
        width: 100%;
        text-align: right;
        .sub-title {
          color: #1320cf;
        }
        .gopayment {
          margin-left: 10px;
          padding: 2px;
          border: 1px solid #ed4646;
          color: #ed4646;
        }
      }
    }
  }
}
</style>